<template>
    <div>
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>商品标题</th>
            <th>商品图片</th>
            <th>商品描述</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in productDTOS" :key="index">
            <td>{{ item.productId }}</td>
            <td>{{ item.title }}</td>
            <td><img :src="item.imgInfosBOs[0].imgUrl" alt=""></td>
            <td>{{ item.description }}</td>
            <td>{{ item.adminStatus == 1 ? '通过' : '未通过' }}</td>
            <td>
              <button @click="rejectItem(index)">通过</button>
            </td>
          </tr>
        </tbody>
      </table>
      <table style="margin-top: 50px;">
        <thead>
          <tr>
            <th>编号</th>
            <th>帖子描述信息</th>
            <th>帖子图片展示</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item1, index) in allPros" :key="index">
            <td>{{ item1.opusId }}</td>
            <td>{{ item1.description }}</td>
            <td><img :src="item1.imgInfosList[0].imgUrl" alt=""></td>
            <td>{{ item1.adminStatus == 1 ? '通过' : '未通过' }}</td>
            <td>
              <button @click="rejectItem1(index)">通过</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  export default {
    data() {
      return {
        productDTOS:[],
        allPros:[]
      };
    },
    mounted(){
      this.showAllProduct();
      this.showAllpros();
    },
    methods: {
      approveItem(index) {
        this.items[index].status = 1;
      },
      rejectItem(index) {
        console.log(index);
        this.productDTOS[index].adminStatus = 1
        console.log( this.productDTOS[index].adminStatus );
        axios
          .post(
            "http://localhost:8081/salvage/admin/updateAdminStatus",
            {
                productId: this.productDTOS[index].productId,
               adminStatus: this.productDTOS[index].adminStatus
            }
          )
      },
      rejectItem1(index) {
        this.allPros[index].adminStatus = 1
        axios
          .post(
            "http://localhost:8081/salvage/admin/updateOpusAdminStatus",
            {
              opusId: this.allPros[index].opusId,
             adminStatus: "1"
            }
          )
      },
      showAllProduct(){
          axios
          .post(
            "http://localhost:8081/salvage/products/getProductInfos",
            {
             adminStatus:"2",
             productStatus:"1"
            }
          )
          .then((response) => {
            if (response.data.code == "00000") {
              console.log(response.data.data);
              this.productDTOS = response.data.data.productDTOS
              console.log('2345678765432345678654323456765432',this.productDTOS);
              console.log(this.productDTOS.imgInfosBOs[0]?.remarks);
              this.productImgList = this.productDTOS.imgInfosBOs[0].remarks;
              console.log(this.productImgList);
            }
          });
        },
        text(){
          axios
          .post(
            "http://localhost:8081/salvage/opus/addOneLike",
            {
              opusId :"17"
            }
          )
          .then((response) => {
            if (response.data.code == "00000") {
              console.log(response.data.data);
            }
          });
        },
      showAllpros(){
        axios.post('http://localhost:8081/salvage/opus/get2AdminStatus')
        .then((res)=>{
          if(res.data.code=='00000'){
            this.allPros =res.data.data.opusInfoList
            console.log( this.allPros);
          }
        });
      }
    }
  };
  </script>
  
  <style scoped>
  table,
  th,
  td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  
  th,
  td {
    padding: 40px;
    text-align: left;
  }
  
  th {
    background-color: #eee;
  }
  
  img {
    width: 50px;
    height: 50px;
    object-fit: cover;
  }
  </style>
  